function carousel_final(id) {
	var that = this;
	this.box = document.querySelector(id);
	this.is_run = false;
	this.now_index = 0;
	this.last_index = 0;
	this.carousel = this.box.querySelector("ul");
	this.carousel_details = this.box.querySelectorAll("ul li");
	this.n = this.carousel_details.length;
	this.right_arr = this.box.querySelector(".right_arrow");
	this.left_arr = this.box.querySelector(".left_arrow");
	this.controls = this.box.querySelectorAll("ol li");
	this.new_li = null;
//	this.gap = this.box.dataset.gap;
//	this.theta = 2 * Math.PI / this.n;
//	this.setupCarousel(this.n, parseFloat(getComputedStyle(this.carousel_details[0]).width));
//	this.box.addEventListener('change', function() {
//		setupCarousel(this.n, parseFloat(getComputedStyle(this.carousel_details[0]).width));
//	});

	this.auto();
	this.right_arr.onclick = function() {
		if(!that.is_run) {
			that.is_run = true;
			if(++that.now_index >= that.carousel_details.length) {
				that.right_run(that.now_index);
			} else {
				that.run(that.now_index);
			}
		}
	}

	//左箭头点击事件
	this.left_arr.onclick = function() {
		if(!that.is_run) {
			that.is_run = true;
			if(--that.now_index < 0) {
				that.left_run(that.now_index);
			} else {
				that.run(that.now_index);
			}
		}
	}

	this.box.onmouseover = function() {
		clearInterval(that.timer);
	}
	this.box.onmouseout = function() {
		that.auto();
	}

}
//
//carousel_final.prototype.setupCarousel = function(n, s) {
//	this.apothem = s / (2 * Math.tan(Math.PI / this.n));
//
//	this.carousel.style.transformOrigin = '50% 50% ' + -this.apothem + 'px';
//
//	for(var i = 0; i < n; i++) {
//		this.carousel_details[i].style.padding = this.gap + 'px';
//	}
//	for(i = 1; i < n; i++) {
//		this.carousel_details[i].style.transformOrigin = '50% 50% ' + -this.apothem + 'px';
//		this.carousel_details[i].style.transform = 'rotateY(' + i * this.theta + 'rad)';
//	}
//
//	this.rotateCarousel(this.now_index);
//}
//
//carousel_final.prototype.rotateCarousel = function(imageIndex) {
//	this.carousel.style.transform = 'rotateY(' + imageIndex * -this.theta + 'rad)';
//}

//轮播图运行主函数
carousel_final.prototype.run = function(target_index) {
	var that = this;
	that.carousel.style.transform = "translateX(-" + target_index * 100 + "%)";
	that.controls[that.last_index].classList.remove("active");
	that.last_index = target_index;
	that.controls[target_index].classList.add("active");
	that.carousel.addEventListener("transitionend", function() {
		that.is_run = false;
	})
}

//右边边界轮播
carousel_final.prototype.right_run = function(target_index) {
	/*将第一张克隆
	 * 将克隆出来的元素添加到最后
	 * 执行轮播时的动画
	 * 动画结束后将视图的位置调到第一位
	 * 将克隆的元素裁剪
	 * 将原来的圆点取消类名
	 * 将第一圆点加上类名
	 * 
	 *
	 */
	var that = this;
	this.new_li = this.carousel_details[0].cloneNode(true);
	this.carousel.appendChild(this.new_li);
	this.carousel.style.transform = "translateX(-" + target_index * 100 + "%)";
	this.carousel.addEventListener("transitionend", right_run_end);
	this.controls[that.last_index].classList.remove("active");
	this.last_index = 0;
	this.now_index = 0;
	this.controls[that.now_index].classList.add("active");

	function right_run_end() {
		that.carousel.style.transition = "none";
		that.carousel.style.MozTransition = "none";
		that.carousel.style.transform = "translateX(0%)";
		that.carousel.currentStyle ? console.dir(carousel.currentStyle) : getComputedStyle(that.carousel).transform;
		that.carousel.style.transition = "";
		that.new_li.remove();
		that.carousel.removeEventListener("transitionend", right_run_end);
	}

}

//左边边界轮播

carousel_final.prototype.left_run = function(target_index) {
	/*
	 * 1.将最后一张克隆
	 * 2.首先将transition去掉
	 * 3.将新的li添加到第一位
	 * 4.将可视窗口移动-100%
	 * 5.将transition添加回来
	 * 7.将transion再次去掉
	 * 8.将克隆图片砍掉
	 * 9.将可视窗口移动到最后一张
	 * 10.将transition添加回来
	 * 11.is_run关闭
	 */
	var that = this;
	this.new_li = this.carousel_details[this.carousel_details.length - 1].cloneNode(true);
	this.carousel.insertBefore(this.new_li, this.carousel_details[0]);
	this.carousel.style.transition = "none";
	this.carousel.style.transform = "translateX(-100%)";
	this.carousel.currentStyle ? console.dir(carousel.currentStyle) : getComputedStyle(this.carousel).transform;
	this.carousel.style.transition = "";
	this.carousel.style.transform = "translateX(0%)";
	this.carousel.addEventListener("transitionend", left_run_end);
	this.controls[this.last_index].classList.remove("active");
	this.last_index = this.carousel_details.length - 1;
	this.now_index = this.carousel_details.length - 1;
	this.controls[this.now_index].classList.add("active");

	function left_run_end() {
		that.carousel.style.transition = "none";
		that.new_li.remove();
		that.carousel.style.transform = "translateX(-" + (that.carousel_details.length - 1) + "00%)";
		that.carousel.currentStyle ? console.dir(carousel.currentStyle) : getComputedStyle(that.carousel).transform;
		that.carousel.style.transition = "";
		that.is_run = false;
		that.carousel.removeEventListener("transitionend", left_run_end);
	}
}

// 定时轮播
carousel_final.prototype.auto = function() {
	var that = this;
	this.timer = setInterval(function() {
		if(++that.now_index >= that.carousel_details.length) {
			that.right_run(that.now_index);

		} else {
			that.run(that.now_index);

		}
	}, 2000);
};

var run1 = new carousel_final("#carousel_box1");
var run1 = new carousel_final("#carousel_box2");